<template>
    <div class="earlyWarning">
        <!-- 顶部卡片 -->
        <div class="topCard">
            <div class="item" v-for="(v, i) in 4" :key="i">
                <img :src="'/src/assets/my_icon/card' + (i + 1) + '.png'" alt="" />
                <div class="cardData">
                    <div class="cardData_top">2,5687</div>
                    <div class="cardData_bottom">本日数据新增</div>
                </div>
            </div>
        </div>
        <!-- 表格模块 -->
        <div class="table">
            <div class="top">
                <div class="left">
                    <img src="/src/assets/my_icon/icon1.png" alt="" />
                    <div>裂产网址 <span style="color: #758fd9">/ 裂产网址 裂产网址</span></div>
                </div>
                <div class="right">
                    <div class="caseScreening">
                        <el-select v-model="value" placeholder="案件筛选" size="large" style="width: 240px">
                            <template #prefix>
                                <Icon color="#1a92ff" size="20" name="fa fa-filter" />
                            </template>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <div class="unitScreening">
                        <el-select v-model="value" placeholder="单位筛选" size="large" style="width: 240px">
                            <template #prefix>
                                <Icon color="#1a92ff" size="20" name="fa fa-filter" />
                            </template>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <div class="demo-date-picker">
                        <div class="block">
                            <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="到"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :size="size"
                            />
                        </div>
                    </div>
                    <div class=""><el-button type="primary">下载</el-button></div>
                </div>
            </div>
            <table class="dataTable">
                <tr class="tableHead">
                    <th v-for="(category, index) in categories" :key="index">{{ category }}</th>
                </tr>
                <tbody>
                    <tr v-for="(v, i) in 7" :key="i" class="tableContent">
                        <td>01</td>
                        <td>2024-05-24 15:33</td>
                        <td>https://hao.1526688554.com/?src=jsqth</td>
                        <td>123.123.123</td>
                        <td>XXXXXXXXXXXXX</td>
                        <td>XXXXXXXXXXXXX</td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页模块 -->
            <div class="paging">
                <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
            </div>
            <el-dialog v-model="dialogVisible" title="" width="500" :before-close="handleClose">
                <div class="dialog">123</div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogVisible = false"> 提交验证 </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dialogVisible = ref(true)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
const categories: Array = ['序号', '更新时间', '涉诈网址', 'IP地址', 'IP地址', 'IP地址']
const value = ref('')
const options: Array = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>

<style lang="scss" scoped>
.earlyWarning {
    padding: 25px;
    .topCard {
        width: 100%;
        display: flex;
        .item {
            width: 25%;
            height: 165px;
            margin-right: 25px;
            border-radius: 10px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .cardData {
                position: absolute;
                padding: 42px 47px;
                .cardData_top {
                    color: #333333;
                    font-size: 34px;
                }
                .cardData_bottom {
                    font-size: 18px;
                    color: #666666;
                    margin-top: 10px;
                }
            }
        }
        .item:last-child {
            margin-right: 0;
        }
    }
    .table {
        margin-top: 25px;
        background-color: #fff;
        padding: 25px;
        border-radius: 10px;
        .top {
            display: flex;
            justify-content: space-between;
            .left {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                img {
                    width: 21px;
                    height: 21px;
                    margin-right: 18px;
                }
            }
            .right {
                display: flex;
                .caseScreening,
                .unitScreening {
                    margin-right: 11px;
                }
                .demo-date-picker {
                    display: flex;
                    width: 100%;
                    padding: 0;
                    flex-wrap: wrap;
                }

                .demo-date-picker .block {
                    // padding: 30px 0;
                    text-align: center;
                    border-right: solid 1px var(--el-border-color);
                    flex: 1;
                }

                .demo-date-picker .block:last-child {
                    border-right: none;
                }

                .demo-date-picker .demonstration {
                    display: block;
                    color: var(--el-text-color-secondary);
                    font-size: 14px;
                    margin-bottom: 20px;
                }
                ::v-deep .el-range-editor.el-input__wrapper {
                    padding: 20px 10px;
                    border-radius: 18px;
                }
                ::v-deep .el-select .el-input__wrapper {
                    border-radius: 18px;
                }
                ::v-deep .el-select--large {
                    width: 212px !important;
                }
                ::v-deep .el-date-editor .el-range__icon {
                    color: #1a92ff;
                    font-size: 18px;
                }
                ::v-deep .el-button--primary {
                    padding: 20px 15px;
                    border-radius: 18px;
                    margin-left: 10px;
                }
            }
        }
        .dataTable {
            width: 100%;
            text-align: center;
            border-collapse: collapse; /* 消除单元格之间的间隙 */
            margin-top: 35px;
            .dataTable th,
            .dataTable td {
                vertical-align: middle; /* 设置垂直居中对齐 */
            }
            .tableHead {
                background-color: #f1f5fe;
                height: 43px;
            }
            .tableContent {
                height: 43px;
                font-size: 13px;
            }
            .tableContent:nth-child(odd) {
                background-color: #f7f9fe; /* 设置你想要的背景颜色 */
            }
            .tableContent:hover {
                background-color: #e9f6fe;
            }
        }
        .paging {
            margin-top: 165px;
            display: flex;
            justify-content: flex-end; /* 将内容向右对齐 */
        }
    }
}
</style>
